<template>
  <div class="onlineApplicationPage">
    <div class="onlineApplicationPage_left">
      <div class="onlineApplicationPage_left_title">
        最新应用上线项目
      </div>
      <div class="onlineApplicationPage_left_body">
        <div>
          <img style="width:65px" src="../../assets/images/mapTest1/1.png">
          <div style="margin-top:10px;font-size:14px;color:black">药安通管理平台</div>
        </div>
        <div style="margin-top:10px">
          <img style="width:65px" src="../../assets/images/mapTest1/2.jpeg">
          <div style="margin-top:10px;font-size:14px;color:black">菜篮子</div>
        </div>
        <div style="margin-top:10px">
          <img style="width:65px" src="../../assets/images/mapTest1/5.png">
          <div style="margin-top:10px;font-size:14px;color:black">网络订餐智能监管系统</div>
        </div>
        <div style="margin-top:10px">
          <img style="width:65px" src="../../assets/images/mapTest1/3.png">
          <div style="margin-top:10px;font-size:14px;color:black">旅游大数据分析</div>
        </div>

      </div>

    </div>
    <div class="onlineApplicationPage_right">
      <div class="onlineApplicationPage_right_body">
        <div style="flex:1;text-align:center">
          <span style="display: inline-block;margin-top: 10px;font-size:15px;color:black;">近半年应用上线情况表</span>
          <div style="margin-top:10px">
            <div style="height:calc(14vh);width:100%">
              <VEcharts
                autoresize
                :options="rightConfig"
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
        </div>
        <div style="flex:1;text-align:center">
          <span style="display: inline-block;margin-top: 10px;font-size:15px;color:black;">上线应用评估结果图</span>
          <div style="margin-top:10px">
            <div style="height:calc(14vh);width:100%">
              <VEcharts
                autoresize
                :options="rightConfig1"
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
        </div>
        <div style="flex:1;text-align:center">
          <span style="display: inline-block;margin-top: 10px;font-size:15px;color:black;">上线应用资金支付情况表</span>
          <div style="margin-top:10px">
            <div style="height:calc(14vh);width:100%">
              <VEcharts
                autoresize
                :options="rightConfig2"
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="onlineApplicationPage_right_table">
        <div class="oneAccountPage_body_search">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="场景名称">
              <el-input v-model="formInline.user" placeholder="场景名称" />
            </el-form-item>
            <el-form-item label="归口领域">
              <el-select v-model="formInline.region" placeholder="归口领域">
                <el-option label="诸暨市" value="shanghai" />
                <el-option label="市委人才办" value="beijing" />
                <el-option label="越城区" value="beijing1" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary">搜索</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <vxe-table
            border
            stripe
            resizable
            highlight-hover-row
            height="380"
            :loading="loading"
            :checkbox-config="{labelField: 'id', highlight: true, range: true}"
            :data="tableData"
          >
            <vxe-table-column type="seq" width="40" />
            <vxe-table-column field="name" min-width="180" title="场景名称" show-overflow />
            <!-- <vxe-table-column field="sex" min-width="150" title="归属省级重大应用" show-overflow /> -->
            <vxe-table-column field="age" title="归口领域" min-width="100" show-overflow />
            <vxe-table-column min-width="90" field="address" title="实施责任主体" show-overflow />
            <vxe-table-column min-width="80" field="address1" title="首席数据官" show-overflow />
            <vxe-table-column min-width="70" field="address2" title="项目资金(万元)" show-overflow />
            <vxe-table-column min-width="70" field="address3" title="支付资金(万元)" show-overflow />
            <vxe-table-column min-width="100" field="address4" title="上线时间" show-overflow />
            <vxe-table-column
              fixed="right"
              min-width="80"
              title="操作"
            >
              <template #default="{ row }">
                <span style="cursor:pointer">
                  <span
                    style="color:blue;"
                  >链接</span>
                </span>

              </template>
            </vxe-table-column>
          </vxe-table>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import VEcharts from '@/components/vecharts';
export default {
  components: {
    VEcharts
  },
  data() {
    return {
      tableData: [
        { name: '绍兴市基层公权力监管平台2.0', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '120', address3: '100',
          address4: '2021-10-21', address5: '' },
        { name: '人才管家应用场景', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '200', address3: '100',
          address4: '2021-10-07', address5: '' },
        { name: '绍兴市基层公权力监管平台2.0', sex: '浙里畅通人才循环应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '340', address3: '200',
          address4: '2021-10-12', address5: '' },
        { name: '智汇民情中枢应用场景', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '500', address3: '400',
          address4: '2021-06-22', address5: '' },
        { name: '绍兴市基层公权力监管平台2.0', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '630', address3: '290',
          address4: '2021-03-07', address5: '' },
        { name: '绍兴市基层公权力监管平台2.0', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '540', address3: '200',
          address4: '2021-10-27', address5: '' },
        { name: '绍兴市基层公权力监管平台2.0', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '440', address3: '90',
          address4: '2021-03-17', address5: '' },
        { name: '绍兴市基层公权力监管平台2.0', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '100', address3: '80',
          address4: '2021-05-17', address5: '' },
        { name: '绍兴市基层公权力监管平台2.0', sex: '浙里基层公权力治理应用', age: '党政机关整体智治', address: '市纪委市监委', address1: '', address2: '200', address3: '167',
          address4: '2021-05-11', address5: '' }
      ],
      formInline: {
        user: '',
        region: ''
      },
      rightConfig: {
        xAxis: {
          type: 'category',
          data: ['本月', '7月', '6月', '5月', '4月', '3月', '2月']
        },
        yAxis: {
          type: 'value',
          splitNumber: 2
        },
        grid: {
          top: '5%',
          left: '7%',
          bottom: '5%',
          containLabel: true
        },
        series: [{
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }]
      },
      rightConfig1: {
        grid: {
          bottom: '20%',
          top: '5%',
          left: '10%'
        },
        xAxis: {
          type: 'category',
          data: ['优秀', '良好', '不合格']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150],
          type: 'bar',
          barWidth: 20

        }]
      },
      rightConfig2: {
        legend: {
          orient: 'vertical',
          left: 'left',
          padding: [0, 0, 40, 0],
          textStyle: { // 图例文字的样式
            color: 'black',
            fontSize: 8
          }

        },
        color: ['#91cc76', '#ef6666'],
        grid: {
          bottom: '-5%',
          top: '10%'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            data: [
              { value: 90, name: '已支付608万' },
              { value: 10, name: '未支付60.8' }

            ],
            label: { // 饼图图形上的文本标签
              normal: {
                show: true,
                position: 'inner', // 标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 12 // 文字的字体大小
                },
                formatter: '{d}%'

              }
            },

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    };
  }
};
</script>

<style lang='scss' scoped>
  .onlineApplicationPage{
    padding:15px;
    display: flex;
    height: calc(83vh);
  }
  .onlineApplicationPage_left{
    flex:1;
    padding:5px;
    background: #fff;
    margin-right: 20px;
    border-radius: 10px

  }
  .onlineApplicationPage_right{
    flex:5
  }
  .onlineApplicationPage_left_title{
    text-align: center;
    margin-top: 10px;
    font-size:18px;
    color:black;
  }
  .onlineApplicationPage_left_body{
    padding:5px;
    text-align: center;
    margin-top:20px;
    height: calc(70vh);
    overflow-y: auto;
    cursor: pointer;
  }
  .onlineApplicationPage_right_body{
    display: flex;
    background: #fff;
    height: calc(20vh);
    border-radius: 10px
  }
  .onlineApplicationPage_right_table{
    margin-top: 10px;
    padding:0px 20px;
    height: calc(58vh);
    border-radius: 10px;
    background: #fff
  }
    .oneAccountPage_body_search{
      padding:10px 20px;
    }

</style>
